<template>
	<view class="header">
		<view class="header-1">
			<view class="header-text">
				<text>小默商城</text>
			</view>
			<view class="header-inpt">
				<image src="/static/fandajin.png" mode="" class="img"></image>
				<text>搜索商品名称</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.header {
		background: rgb(2, 206, 157);
		padding: 10px;
		z-index: 999;
	}

	.header-1 {
		width: 375px;
		margin: 0 auto;
	}

	.header-text {
		display: flex;
		height: 55px;
		align-items: center;
	}

	.header-text text {
		color: rgba(255, 255, 255, 1);
		font-size: 18px;
		font-family: Arial;
		font-weight: 700;
		line-height: 30px;
		margin: 0 0 0 5px;
	}

	.header-inpt {
		display: flex;
		visibility: visible;
		width: 345px;
		height: 35px;
		background: rgb(255, 255, 255);
		cursor: pointer;
		pointer-events: auto;
		box-shadow: none;
		border-color: rgb(121, 121, 121);
		border-style: solid;
		border-width: 0px;
		border-radius: 18px;
		align-items: center;
		margin: 0 0 0 5px;
	}

	.header-inpt text {
		font-size: 13px;
		line-height: 19px;
		color: #bebebe;
		padding: 0 0 0 5px;
	}


	.img {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: rgb(2, 206, 157);
	}
</style>